<template>
  <basic-container>
    <div>
      <div class="echarts-border">
        <el-form ref="submitForm" label-width="80px" style="margin-left: 20px;display: flex">
          <el-form-item label="选择订单:">
            <el-select id="id-creativereport-bc-basicsreport-offerId"
                       v-model="submitForm.offerId" size="mini" multiple filterable
                       @change="controlOfferid($event,'submitForm')">
              <el-option v-for="(item,index) in offerList" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围:">
            <el-date-picker id="id-creativereport-bc-basicsreport-timeChange"
                            v-model="submitForm.date"
                            size="mini"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            @change="timeChange($event,'submit')"
                            :picker-options="pickerOption"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <!--每日提交及在线数-->
      <div class="echarts-border" v-loading="submitFormLoading">
        <div id="submitNumCharts" :style="{width: '100%', height: '400px'}"></div>
      </div>
      <!--提交素材类型及数量统计-->
      <div class="echarts-border" v-loading="submitTypeFormLoading">
        <div style="font-weight: 800;font-size: 18px;margin-left: 5px;margin-bottom: 10px">制作素材类型及数量统计</div>
        <!--<el-form ref="submitTypeForm" label-width="80px" style="margin-left: 20px;display: flex">-->
          <!--&lt;!&ndash;          <el-form-item label="提交人:">&ndash;&gt;-->
          <!--&lt;!&ndash;            <el-select multiple filterable v-model="submitTypeForm.userId" size="mini" style="margin-right: 20px"&ndash;&gt;-->
          <!--&lt;!&ndash;                       @change="controlSubmitUserId">&ndash;&gt;-->
          <!--&lt;!&ndash;              <el-option v-for="(item,index) in submittedList" :key="index" :value="item.id"&ndash;&gt;-->
          <!--&lt;!&ndash;                         :label="item.realName"></el-option>&ndash;&gt;-->
          <!--&lt;!&ndash;            </el-select>&ndash;&gt;-->
          <!--&lt;!&ndash;          </el-form-item>&ndash;&gt;-->
          <!--<el-form-item label="选择订单:">-->
            <!--<el-select v-model="submitTypeForm.offerId" size="mini" multiple filterable-->
                       <!--@change="controlOfferid($event,'submitTypeForm')">-->
              <!--<el-option v-for="(item,index) in offerList" :key="index" :label="item.name" :value="item.id"></el-option>-->
            <!--</el-select>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="时间范围:">-->
            <!--<el-date-picker v-model="submitTypeForm.date"-->
                            <!--size="mini"-->
                            <!--type="daterange"-->
                            <!--range-separator="至"-->
                            <!--start-placeholder="开始日期"-->
                            <!--end-placeholder="结束日期"-->
                            <!--format="yyyy-MM-dd"-->
                            <!--value-format="yyyy-MM-dd"-->
                            <!--@change="timeChange($event,'submitType')"-->
                            <!--:picker-options="submitTypeFormPickerOption"-->
            <!--&gt;</el-date-picker>-->
          <!--</el-form-item>-->
        <!--</el-form>-->
        <div>
          <div style="display: flex">
            <div id="StatisticsBar" :style="{width: '50%', height: '400px'}"></div>
            <div id="StatisticsPie" :style="{width: '50%', height: '400px'}"></div>
          </div>
          <div id="StatisticsLine" :style="{width: '100%', height: '400px'}"></div>
        </div>

      </div>
      <!--在线素材-->
<!--      <div class="echarts-border" v-loading="onLineFormloading">-->
<!--        <div style="font-weight: 800;font-size: 18px;margin-left: 5px;margin-bottom: 10px">在线素材</div>-->
        <!--<el-form ref="onLineForm" label-width="80px" style="margin-left: 20px;display: flex">-->
          <!--&lt;!&ndash;          <el-form-item label="提交人:">&ndash;&gt;-->
          <!--&lt;!&ndash;            <el-select v-model="onLineForm.userId" multiple filterable @change="controlOnLineUserId" size="mini"&ndash;&gt;-->
          <!--&lt;!&ndash;                       style="margin-right: 20px">&ndash;&gt;-->
          <!--&lt;!&ndash;              <el-option v-for="(item,index) in submittedList" :key="index" :value="item.id"&ndash;&gt;-->
          <!--&lt;!&ndash;                         :label="item.realName"></el-option>&ndash;&gt;-->
          <!--&lt;!&ndash;            </el-select>&ndash;&gt;-->
          <!--&lt;!&ndash;          </el-form-item>&ndash;&gt;-->
          <!--<el-form-item label="选择订单:">-->
            <!--<el-select v-model="onLineForm.offerId" multiple-limit="5" size="mini" multiple filterable-->
                       <!--@change="controlOfferid($event,'onLineForm')">-->
              <!--<el-option v-for="(item,index) in offerList" :key="index" :label="item.name" :value="item.id"></el-option>-->
            <!--</el-select>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="时间范围:">-->
            <!--<el-date-picker v-model="onLineForm.date"-->
                            <!--size="mini"-->
                            <!--type="daterange"-->
                            <!--range-separator="至"-->
                            <!--start-placeholder="开始日期"-->
                            <!--end-placeholder="结束日期"-->
                            <!--format="yyyy-MM-dd"-->
                            <!--value-format="yyyy-MM-dd"-->
                            <!--@change="timeChange($event,'onLine')"-->
                            <!--:picker-options="onLineFormPickerOption"></el-date-picker>-->
          <!--</el-form-item>-->
        <!--</el-form>-->
<!--        <div id="onlineCharts" :style="{width: '100%', height: '400px'}"></div>-->
<!--      </div>-->
    </div>
  </basic-container>
</template>
<script>
import * as echarts from 'echarts';
import {createEventHandler} from "@/util/events";
import {geActiveAndStop} from "@/api/business/offer"
import {
  commitAndOnline,
  submitted,
  typeAndNumber,
  typeAndNumberAudit,
  numberAndRate,
  online
} from '@/api/creativeReport/basicsReport';
import store from "@/store/"
import Moment from "moment"
import {findObjectList} from "@/util/util";

export default {
  name: 'basicsReport',
  data() {
    return {
      pickerMinDate: '',//第一次选中的时间
      submitTypeFormPickerMinDate: '',
      onLinePickerMinDate: '',
      now: '',
      lastWeek: '',
      submitForm: {
        date: [],
        offerId: [''],
      },
      offerList: [],
      submitTypeForm: {
        date: '',
        userId: [''],
        offerId: [''],
      },
      onLineForm: {
        date: '',
        userId: [''],
        offerId: [''],
      },
      submitFormLoading: false,
      submitTypeFormLoading: false,
      onLineFormloading: false,
      offerId: '',
      submittedList: [],
      pickerOption: { //时间范围限制
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate.getTime();
          if (maxDate) {
            this.pickerMinDate = '';
          }
        },
        disabledDate: (time) => {
            const newDate = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
            /*if (this.pickerMinDate) {
              let choiceDateTime = new Date(this.pickerMinDate).getTime();
              const minTime = new Date(choiceDateTime).setMonth(new Date(choiceDateTime).getMonth() - 1);
              const maxTime = new Date(choiceDateTime).setMonth(new Date(choiceDateTime).getMonth() + 1);
              const min = minTime;
              const max = newDate < maxTime ? newDate : maxTime;
              return time.getTime() < min || time.getTime() > max;
            }*/
            return time.getTime() > newDate;
          },
      },

      submitTypeFormPickerOption: { //时间范围限制
        onPick: ({ maxDate, minDate }) => {
          this.submitTypeFormPickerMinDate = minDate.getTime();
          if (maxDate) {
            this.submitTypeFormPickerMinDate = '';
          }
        },
        disabledDate: (time) => {
            let choiceDateTime = new Date(this.submitTypeFormPickerMinDate).getTime();
            const minTime = new Date(choiceDateTime).setMonth(new Date(choiceDateTime).getMonth() - 1);
            const maxTime = new Date(choiceDateTime).setMonth(new Date(choiceDateTime).getMonth() + 1);
            const min = minTime;
            const newDate = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
            const max = newDate < maxTime ? newDate : maxTime;
            if (this.submitTypeFormPickerMinDate) {
              return time.getTime() < min || time.getTime() > max;
            }
            return time.getTime() > newDate;
          },
      },

      onLineFormPickerOption: { //时间范围限制
        onPick: ({ maxDate, minDate }) => {
          this.onLinePickerMinDate = minDate.getTime();
          if (maxDate) {
            this.onLinePickerMinDate = '';
          }
        },
        disabledDate: (time) => {
          let choiceDateTime = new Date(this.onLinePickerMinDate).getTime();
          const minTime = new Date(choiceDateTime).setMonth(new Date(choiceDateTime).getMonth() - 1);
          const maxTime = new Date(choiceDateTime).setMonth(new Date(choiceDateTime).getMonth() + 1);
          const min = minTime;
          const newDate = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
          const max = newDate < maxTime ? newDate : maxTime;
          if (this.onLinePickerMinDate) {
            return time.getTime() < min || time.getTime() > max;
          }
          return time.getTime() > newDate;
        },
      },


    }
  },
  beforeRouteLeave(to, form, next) {
    let self = this;
    if (self.eventHandler) {
      self.eventHandler.clear();
    }
    next();
  },
  created() {
    this.submitTypeForm = this.submitForm;
    this.onLineForm = this.submitForm;

    this.offerId = store.state.user.offer
    this.refresh = () => {
      //refresh开始，这样写避免代码迁移太多

      submitted(this.offerId).then(res => {
        this.submittedList = [{id: '', realName: '全部'}, ...res.data.data]
      })
      geActiveAndStop(store.state.user.user_id).then(res => {
        this.offerList = res.data.data
        this.offerList.unshift({name: '全部', id: ''})
      })
      this.$nextTick(() => {
        this.init()
      })
      this.lastWeek = Moment().subtract('days', 6).format('yyyy-MM-DD')
      this.now = Moment().format('yyyy-MM-DD')
      this.submitForm.date = [this.lastWeek, this.now]
      this.submitTypeForm.date = [this.lastWeek, this.now]
      this.onLineForm.date = [this.lastWeek, this.now]
      // this.submitTypeForm.userId = ['']
      // this.onLineForm.userId = ['']

      //refresh结束
    };

    let self = this;
    this.eventHandler = createEventHandler("offerCenter")
      .addListener((event) => {
        if (event.message == 'offerChanged' && event.offerId && event.offerId !== "") {
          this.offerId = event.offerId
          self.refresh();
        }
      });
    this.refresh();
  },
  methods: {
    // controlOnLineUserId(val) {
    //   if (val.findIndex(item => item === "") !== -1 && val.length > 1 && val[val.length - 1] !== "") {
    //     val.splice(val.findIndex(item => item === ""), 1)
    //   } else if (val[val.length - 1] === "") {
    //     val = [""]
    //   }
    //   return this.onLineForm.userId = val
    // },
    // controlSubmitUserId(val) {
    //   if (val.findIndex(item => item === "") !== -1 && val.length > 1 && val[val.length - 1] !== "") {
    //     val.splice(val.findIndex(item => item === ""), 1)
    //   } else if (val[val.length - 1] === "") {
    //     val = [""]
    //   }
    //   return this.submitTypeForm.userId = val
    // },
    init() {
      this.barStatistics()
      this.initSubmitCharts();
      this.onlineBarStatistics()
    },

    //每日提交及在线数查询
    barStatistics() {
      if(this.submitForm.date == null || this.submitForm.date.length == 0) {
        return;
      }
      let data = {
        beginDate: this.submitForm.date[0],
        endDate: this.submitForm.date[1],
        offerId: this.submitForm.offerId.join(','),
      }
      this.submitFormLoading = true
      commitAndOnline(data).then(res => {
        if (res.data.success) {
          this.submitFormLoading = false
          this.initBarEcharts(res.data.data.xAxis, res.data.data.yAxisCommit, res.data.data.yAxisOnline);
        }
      })
    },
    //提交素材类型及数量统计
    initSubmitCharts() {
      if(this.submitTypeForm.date == null || this.submitTypeForm.date.length == 0) {
        return;
      }
      let data = {
        beginDate: this.submitTypeForm.date[0],
        endDate: this.submitTypeForm.date[1],
        offerId: this.submitTypeForm.offerId.join(','),
        userId: '',
        bc: true
      }
      this.submitTypeFormLoading = true
      typeAndNumber(data).then(res => {
        this.submitTypeFormLoading = false
        this.initStatisticsBar(res.data.data.xAxis,
          res.data.data.yAxisImage, res.data.data.yAxisVideo, res.data.data.mapping);
        let val = {
          bc: true,
          offerId: this.submitTypeForm.offerId.join(','),
          beginDate: this.submitTypeForm.date[0],
          endDate: this.submitTypeForm.date[1],
        }
        let clickOffer = {
          bc: true,
          offerId: this.submitTypeForm.offerId[0],
          beginDate: this.submitTypeForm.date[0],
          endDate: this.submitTypeForm.date[1],
        }
        typeAndNumberAudit(clickOffer).then(res => {
          this.initStatisticsPie(res.data.data)
        })
        numberAndRate(clickOffer).then(res => {
          this.initStatisticsLine(res.data.data)
        })
      })
    },

    onlineBarStatistics() {
      if(this.onLineForm.date == null || this.onLineForm.date.length == 0) {
        return;
      }
      let data = {
        beginDate: this.onLineForm.date[0],
        endDate: this.onLineForm.date[1],
        offerId: this.onLineForm.offerId.join(','),
        bc: true,
        userId: ''
      }
      this.onLineFormloading = true
      online(data).then(res => {
        this.onLineFormloading = false
        var series = []
        res.data.data.mapping.map((item, index) => {
          let name
          if (item.image === '-1') {
            name = '全部'
          } else {
            this.offerList.map(i => {
              if (i.id === item.image) {
                name = i.name
              }
            })
          }
          res.data.data.yAxisImage.map((it, i) => {
            if (index === i) {
              series.push(
                {
                  name: name + '图片',
                  type: 'bar',
                  stack: name,
                  label: {
                    show: true
                  },
                  data: it
                },
              )
            }

          })
          res.data.data.yAxisVideo.map((it, i) => {
            if (index === i) {
              series.push({
                name: name + '视频',
                type: 'bar',
                stack: name,
                label: {
                  show: true
                },
                data: it
              },)
            }
          })
        })
        this.initOnlineBarEcharts(res.data.data, series);
      })

    },

    //每日提交及在线数
    initBarEcharts(xAxisData, yAxisCommitData, yAxisOnlineData) {
      var myChart = echarts.init(document.getElementById('submitNumCharts'))
      let option = {
        title: {
          text: '每日提交及有花费素材'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['每日提交', '有花费素材',]
        },
        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '每日提交',
            type: 'bar',
            data: yAxisCommitData
          },
          {
            name: '有花费素材',
            type: 'bar',
            data: yAxisOnlineData
          },
        ]
      };
      option && myChart.setOption(option);
    },

    //在线素材
    initOnlineBarEcharts(data, series1) {
      var myChart = echarts.init(document.getElementById('onlineCharts'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // Use axis to trigger tooltip
            type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        // legend: {
        //   data: ['图片', '视频',],
        //   color:['#DAA520', '#87CEEB',]
        // },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: data.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: series1
      };
      option && myChart.setOption(option, true);
    },

    initStatisticsBar(xAxis, yAxisImage, yAxisVideo, mapping) {
      var myChart = echarts.init(document.getElementById('StatisticsBar'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['图片', '视频']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xAxis,
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '图片',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: yAxisImage
          },
          {
            name: '视频',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: yAxisVideo
          },
        ]
      };
      myChart.on('click', (param) => {
        if (!mapping[param.name + '']) {
          return
        }
        let data = {
          offerId: mapping[param.name + ''],
          bc: true,
          beginDate: this.submitTypeForm.date[0],
          endDate: this.submitTypeForm.date[1],
        }
        typeAndNumberAudit(data).then(res => {
          this.initStatisticsPie(res.data.data)
        })
        numberAndRate(data).then(res => {
          this.initStatisticsLine(res.data.data)
        })
      })
      option && myChart.setOption(option);
    },

    initStatisticsPie(data) {
      var myChart = echarts.init(document.getElementById('StatisticsPie'))
      let option = {
        title: {
          text: '素材审核结果',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {d}%'
        },
        series: [
          {
            name: '素材审核结果',
            type: 'pie',
            radius: '50%',
            data: [
              {value: data.videoPass, name: '视频通过率', itemStyle: {color: '#90EE90'}},
              {value: data.videoReject, name: '视频拒绝率', itemStyle: {color: '#CD5C5C'}},
              {value: data.videoNotAudit, name: '视频未审核', itemStyle: {color: '#27727B'}},
              {value: data.imagePass, name: '图片通过率', itemStyle: {color: '#6495ED'}},
              {value: data.imageReject, name: '图片拒绝率', itemStyle: {color: '#8B1A1A'}},
              {value: data.imageNotAudit, name: '图片未审核', itemStyle: {color: '#FCCE10'}},
              {value: data.other, name: '其它', itemStyle: {color: '#aaa'}}
            ],
          }
        ]
      };
      option && myChart.setOption(option);
    },
    getEchartsInst(eleName) {
      let ele = document.getElementById(eleName);
      let myInst = echarts.getInstanceByDom(ele);
      if (myInst) {
        return myInst;
      } else {
        return echarts.init(ele);
      }
    },
    initStatisticsLine(data, initSelected = [true, true, true]) {
      let self = this;
      self.numberAndRateData = data;
      let legendData = ['图片', '视频', '通过率'];
      let legendDataColor = ['#DAA520', '#87CEEB', '#9ACD32'];
      let myChart = this.getEchartsInst('StatisticsLine');
      if (self.numberAndRateDataOnLegendSelectChanged == null) {
        self.numberAndRateDataOnLegendSelectChanged = (params) => {
          if (!params.selected[legendData[2]]) {
            return;
          }
          let newSelected = [];
          legendData.forEach((legendDataName) => {
            newSelected.push(params.selected[legendDataName]);
          })
          self.$nextTick(() => {
            self.initStatisticsLine(self.numberAndRateData, newSelected);
          })
        };
        myChart.on('legendselectchanged', self.numberAndRateDataOnLegendSelectChanged);
      }
      let legendDataSelected = {};
      for (let i = 0; i < legendData.length; i++) {
        legendDataSelected[legendData[i]] = initSelected[i];
      }
      let poList = data.poList;
      let imageNumber = [];
      let videoNumber = [];
      let passRate = [];
      data.xAxis.forEach(date => {
        let countObjectList = findObjectList(poList, date, 'date');
        let imageSelected = initSelected[0];
        let videoSelected = initSelected[1];
        let rateSelected = initSelected[2];

        let imageCount = 0;
        let passedImageCount = 0;
        let videoCount = 0;
        let passedVideoCount = 0;
        let passedRate = 0;

        countObjectList.forEach(countObject => {
          if (countObject.type == 0) {
            imageCount += countObject.total;
            if (countObject.status == 2) {
              passedImageCount += countObject.total;
            }
          }
          if (countObject.type == 1) {
            videoCount += countObject.total;
            if (countObject.status == 2) {
              passedVideoCount += countObject.total;
            }
          }
        });
        if (rateSelected) {
          let passedCount = (imageSelected || videoSelected) ? (((imageSelected) ? passedImageCount : 0) + ((videoSelected) ? passedVideoCount : 0)) : (passedImageCount + passedVideoCount);
          let totalCount = (imageSelected || videoSelected) ? (((imageSelected) ? imageCount : 0) + ((videoSelected) ? videoCount : 0)) : (imageCount + videoCount);
          if (totalCount > 0) {
            let passedRateNum = Math.round(passedCount * 10000.0 / totalCount).toString();
            while (passedRateNum.length < 3) {
              passedRateNum = '0' + passedRateNum;
            }
            passedRate = (passedRateNum.substring(0, passedRateNum.length - 2) + '.' + passedRateNum.substring(passedRateNum.length - 2)) * 1;
          }
        }
        imageNumber.push(imageCount);
        videoNumber.push(videoCount);
        passRate.push(passedRate);
      });

      let option = {
        xAxis: {
          type: 'category',
          data: data.xAxis,

        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            if (params.length == 0) {
              return '';
            }
            let showTextList = [];
            for (let n = 0; n < params.length; n++) {
              let param = params[n];
              if (n > 0) {
                showTextList.push('<br>');
              }
              if (param.seriesIndex == 2) {
                showTextList.push(param.seriesName + ':' + param.value + '%');
              } else {
                showTextList.push(param.seriesName + ':' + param.value);
              }
            }
            return showTextList.join('');
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          data: legendData,
          boundaryGap: false,
          color: legendDataColor,
          selected: legendDataSelected,
        },
        yAxis: {
          type: 'value',

        },
        series: [
          {
            name: legendData[0],
            data: imageNumber,
            type: 'line'
          },
          {
            name: legendData[1],
            data: videoNumber,
            type: 'line'
          },
          {
            name: legendData[2],
            data: passRate,
            type: 'line'
          },
        ]
      }
      option && myChart.setOption(option);
    },
    /**
     * 控制offerID选择
     */
    controlOfferid(val, type) {
      if (val.findIndex(item => item === "") !== -1 && val.length > 1 && val[val.length - 1] !== "") {
        val.splice(val.findIndex(item => item === ""), 1)
      } else if (val[val.length - 1] === "") {
        val = [""]
      }
      switch (type) {
        case 'submitForm':
          this.submitForm.offerId = val;
          this.$nextTick(() => {
            this.barStatistics();
            this.initSubmitCharts();
            this.onlineBarStatistics();
          });
          break;
        case 'submitTypeForm':
          this.submitTypeForm.offerId = val;
          this.$nextTick(() => {
            // this.initSubmitCharts();
          });
          break;
        case 'onLineForm':
          this.onLineForm.offerId = val
          this.$nextTick(() => {
            // this.onlineBarStatistics();
          });
          break;
      }
    },
    timeChange(val, type) {
      switch (type) {
        case 'submit':
          this.$nextTick(() => {
            this.barStatistics();
            this.initSubmitCharts();
            this.onlineBarStatistics();
          });
          break;
        case 'submitType':
          if (val === null) {
            this.submitTypeFormPickerOption.onPick({})
          }
          this.$nextTick(() => {
            // this.initSubmitCharts();
          });
          break;
        case 'onLine':
          if (val === null) {
            this.onLineFormPickerOption.onPick({})
          }
          this.$nextTick(() => {
            // this.onlineBarStatistics();
          });
          break;
      }
    }
  }
}
</script>
<style lang="scss">
.echarts-border {
  width: 90%;
  margin: 0 auto;
  margin-top: 50px;
  box-shadow: 2px 2px 19px 2px rgba(0, 0, 0, 0.18);
  border-radius: 20px;
  padding: 15px;
}
</style>
